<mk-box *ngIf="!removeMode">
  <mk-box-content>
    <button class="btn btn-default" (click)="removeMode=!removeMode"><i class="fa fa-refresh"></i></button>
    <div style="margin-left: 10px" class="btn-group" dropdown [insideClick]="true">
      <input [value]="(selectedDevice==null)?'选择设备...':selectedDevice.name+'/'+selectedDevice.deviceId" dropdownToggle
             type="button" style="width: 200px;" class="form-control dropdown-toggle">
      <ul *dropdownMenu class="dropdown-menu" style="width: 100%" role="menu" autoClose="onOutsideClick">
        <li role="menuitem" *ngFor="let device of devices">
          <a class="dropdown-item"
             (click)="selectedDevice=device;refreshSensor()">{{device.name}}/{{device.deviceId}}</a>
        </li>
        <li class="divider dropdown-divider"></li>
        <li>
          <div style="display:inline-block;text-align: center;width: 100%">
            <a (click)="gotoDevice(pageDevice-1)"><<</a>
            <input style="width: 50px;text-align: center" [(ngModel)]="pageDevice">/{{maxPageDevice}}
            <a (click)="gotoDevice(pageDevice)">前往</a>
            <a (click)="gotoDevice(pageDevice+1)">>></a>
          </div>
        </li>
      </ul>
    </div>
    <div *ngIf="selectedDevice!=null" class="btn-group" style="margin-left: 10px"
         dropdown
         [insideClick]="true">
      <input [value]="(selectedSensor==null)?'选择传感器':selectedSensor.name+'/'+selectedSensor.id" dropdownToggle
             type="button" style="width: 200px;" class="form-control dropdown-toggle">
      <ul *dropdownMenu class="dropdown-menu" style="width: 100%" role="menu" autoClose="onOutsideClick">
        <li role="menuitem" *ngFor="let sensor of sensors">
          <a class="dropdown-item" (click)="selectedSensor=sensor">{{sensor.name}}/{{sensor.id}}</a>
        </li>
        <li class="divider dropdown-divider"></li>
        <li>
          <div style="display:inline-block;text-align: center;width: 100%">
            <a (click)="gotoSensor(pageSensor-1)"><<</a>
            <input style="width: 50px;text-align: center" [(ngModel)]="pageSensor">/{{maxPageSensor}}
            <a (click)="gotoSensor(pageSensor)">前往</a>
            <a (click)="gotoSensor(pageSensor+1)">>></a>
          </div>
        </li>
      </ul>
    </div>
    <div *ngIf="selectedDevice!=null && selectedSensor!=null" class="btn-group"
         style="margin-left: 10px">
      <div class="form-inline">
        <!--媒体文件情况-->
        <div style="display: inline-block;" *ngIf="selectedSensor.dataType==3">
          <select class="form-control" [(ngModel)]="selectedMediaIndex">
            <option *ngFor="let setting of mediaSettings;let i=index" [value]="i">{{setting.title}}</option>
          </select>
          <button class="btn btn-default" style="margin-left: 10px"
                  (click)="addImage(selectedDevice.deviceId,selectedSensor.id)">添加
          </button>
        </div>
        <!--数值情况-->
        <div style="display: inline-block;" *ngIf="selectedSensor.dataType==0">
          <select (change)="onSelected()" class="form-control" [(ngModel)]="selectedChartIndex">
            <option *ngFor="let setting of chartsSettings;let i=index" [value]="i">{{setting.title}}</option>
            <option *ngFor="let setting of options;let i=index" [value]="i+chartsSettings.length" [disabled]="setting.baseType!='chart'">
              {{setting.name}}
            </option>
          </select>
          <input class="form-control" style="width: 100px;margin-left: 10px;" placeholder="标注" [(ngModel)]="selectedLegend">
          <input *ngIf="!disableNameInput" class="form-control" style="width: 100px;margin-left: 10px"
                 placeholder="命名" [(ngModel)]="selectedName">
          <button class="btn btn-default" style="margin-left: 10px"
                  (click)="addChart(selectedDevice.deviceId,selectedSensor.id)">添加
          </button>
        </div>
      </div>
    </div>
  </mk-box-content>
</mk-box>
<mk-box *ngIf="removeMode">
  <mk-box-content>
    <button class="btn btn-default" (click)="removeMode=!removeMode">返回</button>
    <button style="margin-left: 10px;" class="btn btn-danger" (click)="clear()">删除全部</button>
  </mk-box-content>
</mk-box>
<div class="row">
  <div *ngFor="let option of options;let i=index" [class]="option.clazz">
    <mk-box>
      <mk-box-content>
        <box-display #box [toLoad]="option.toLoad" [name]="option.name" [baseType]="option.baseType"></box-display>
        <button *ngIf="removeMode" class="btn btn-default" (click)="remove(i,box)">删除</button>
      </mk-box-content>
    </mk-box>
  </div>
</div>
